<template>
  <div class="allOrderContainer">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="计费价格" name="first">
        <!-- 头部搜索部分 -->
        <div class="orderHeader">
          <div class="orderSearch">
            <el-form ref="form" :model="orderSearch" :inline="true">
              <el-row :gutter="24">
                <el-col :span="5">
                  <el-form-item label="计价方式" size="mini">
                    <el-select v-model="orderSearch.outlets">
                      <el-option
                        v-for="(item, index) in OpitonsData"
                        :key="index"
                        :value="item.item_name"
                        :label="item.item_name"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div class="hmax_content">
          <div class="kg_list">
            <div class="list_one">
              <span
                >{{ orderSearch.outlets }}区间（单位：{{
                  orderSearch.outlets === "公里数"
                    ? "公里"
                    : orderSearch.outlets === "件数"
                    ? "件"
                    : orderSearch.outlets === "体积"
                    ? "立方米"
                    : "公斤"
                }}）</span
              >
              <div class="list_input" v-for="num in accountNum" :key="num">
                <el-input
                  v-model="accountDetail[num - 1].min"
                  placeholder="0"
                />
                --
                <el-input
                  v-model="accountDetail[num - 1].max"
                  placeholder="无穷大"
                />
              </div>
              <div class="list_icon">
                <i
                  class="el-icon-circle-plus-outline"
                  @click="addAccountNum"
                ></i>
                <i
                  class="el-icon-remove-outline bgcolor"
                  @click="deleteAccountNum"
                ></i>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-bottom: 10px">
          <el-button type="primary" plain size="mini">导入</el-button>
          <el-button type="primary" plain size="mini">导出</el-button>
          <el-button type="primary" size="mini" @click="saveList"
            >保存</el-button
          >
        </div>
        <el-table :data="tableDataDisplay" style="width: 100%">
          <el-table-column prop="iconImg" width="150">
            <template slot="header">
              <i
                @click="addLine"
                class="el-icon-circle-plus-outline"
                style="font-size: 22px; margin: 0px 0 0 8px"
              ></i>
              <span>添加行</span>
            </template>
            <template slot-scope="scope">
              <span
                @click="deleteOneLine(scope.row.id)"
                class="el-icon-remove-outline"
                style="font-size: 22px; margin: 0px 0 0 10px; color: red"
              ></span>
              <el-button
                type="primary"
                plain
                size="mini"
                @click="modifyPriceRule(scope.row.id)"
                >修改</el-button
              >
            </template>
          </el-table-column>
          <el-table-column type="index" label="编号" width="50">
          </el-table-column>
          <el-table-column prop="startregion" label="出发区域" width="350">
            <template slot-scope="scope">
              <!-- <el-cascader
                v-show="scope.row.is_modify"
                style="width: 100%"
                placeholder="输入地区搜索"
                v-model="scope.row.startregion"
                :options="options"
                filterable
                @change="searchRegion"
                :props="{
                  label: 'name',
                  value: 'name',
                }"
              ></el-cascader> -->
              <el-cascader
                ref="startregion"
                :props="props"
                :disabled="!scope.row.is_modify"
                style="width: 250px"
                v-model="scope.row.startregion"
                placeholder="请选择省市区"
              ></el-cascader>
              <!-- {{ scope.row.is_modify === false ? scope.row.startregion : "" }} -->
            </template>
          </el-table-column>
          <el-table-column prop="endregion" label="到达区域" width="350">
            <template slot-scope="scope">
              <!-- <el-cascader
                v-show="scope.row.is_modify"
                style="width: 100%"
                placeholder="输入地区搜索"
                v-model="scope.row.endregion"
                :options="options2"
                filterable
                @change="searchRegion2"
                :props="{
                  label: 'name',
                  value: 'name',
                }"
              ></el-cascader> -->
              <el-cascader
                :disabled="!scope.row.is_modify"
                :props="props"
                style="width: 250px"
                v-model="scope.row.endregion"
                placeholder="请选择省市区"
              ></el-cascader>
              <!-- {{ scope.row.is_modify === false ? scope.row.endregion : "" }} -->
            </template>
          </el-table-column>
          <el-table-column prop="minprice" label="最低价" width="110">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.minprice"
                :disabled="!scope.row.is_modify"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            v-for="num in accountNum"
            :key="num"
            :label="
              accountDetail[num - 1].min +
              '<' +
              [orderSearch.outlets] +
              '<' +
              accountDetail[num - 1].max
            "
          >
            <el-table-column
              :prop="`firstSize${num}`"
              :label="
                orderSearch.outlets === '公里数'
                  ? '起步里程'
                  : orderSearch.outlets === '件数'
                  ? '首件'
                  : orderSearch.outlets === '体积'
                  ? '首方'
                  : '首重'
              "
              width="110"
            >
              <template slot-scope="scope">
                <el-input
                  :disabled="!scope.row.is_modify"
                  v-model="scope.row[`firstSize${num}`]"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              :prop="`firstPrice${num}`"
              label="首价"
              width="110"
            >
              <template slot-scope="scope">
                <el-input
                  :disabled="!scope.row.is_modify"
                  v-model="scope.row[`firstPrice${num}`]"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column :prop="`nextPrice${num}`" label="续价" width="110">
              <template slot-scope="scope">
                <el-input
                  :disabled="!scope.row.is_modify"
                  v-model="scope.row[`nextPrice${num}`]"
                ></el-input>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="折扣/上浮" name="second">
        <div style="float: left; margin-bottom: 10px">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="AddDiscountClickFn"
            >增加</el-button
          >
        </div>
        <el-table :data="DiscountsListData" style="width: 100%">
          <el-table-column
            type="index"
            label="编号"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="iconImg"
            label="操作"
            width="220"
            header-align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                size="mini"
                @click="DetailClickFn(scope.row)"
                >详情</el-button
              >
              <el-button
                type="primary"
                plain
                size="mini"
                @click="deletecloumnFn(scope.row)"
                >删除</el-button
              >
              <el-button
                type="primary"
                plain
                size="mini"
                @click="editorClickFn(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="iconImg"
            label="折扣/上浮条件"
            header-align="center"
          >
            <el-table-column
              prop="product_type"
              label="产品类型"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="mode_of_transportation"
              label="运输方式"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="shipper_ids" label="发货人" width="180">
            </el-table-column>
            <el-table-column prop="consignee_ids" label="收货人" width="180">
            </el-table-column>
            <el-table-column prop="ordersc" label="开单时间" width="350">
            </el-table-column>
            <el-table-column prop="disable_time" label="启用时间" width="220">
            </el-table-column>
            <el-table-column prop="enable_time" label="停用时间" width="220">
            </el-table-column>
            <el-table-column prop="contprice" label="重量范围" width="180">
            </el-table-column>
            <el-table-column prop="contprice" label="体积范围" width="180">
            </el-table-column>
            <el-table-column
              prop="contprice"
              label="件数范围"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="start_off_website_ids"
              label="出发网点"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="purpose_website_ids"
              label="目的网点"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="temperature_layer" label="温层" width="180">
            </el-table-column>
            <el-table-column prop="goods_name" label="货物名称" width="180">
            </el-table-column>
            <el-table-column
              prop="goods_packaging"
              label="货物包装"
              width="180"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column label="折扣/上浮规则" header-align="center">
            <el-table-column prop="name" label="折扣/上浮名称" width="260">
            </el-table-column>
            <el-table-column
              prop="percentage"
              label="折扣/上浮系数"
              width="150"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-drawer
      title="新增折扣"
      :visible.sync="drawerdiscountShow"
      :direction="direction"
      :before-close="handleClose"
      :wrapperClosable="false"
      size="40%"
    >
      <div style="padding: 0 20px" class="form_content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <div class="color_bg">
            <el-form-item label="产品类型" prop="product_type">
              <el-select multiple v-model="ruleForm.product_type">
                <el-option
                  v-for="item in OptionListData"
                  :key="item.id"
                  :value="Number(item.id)"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运输方式" prop="mode_of_transportation">
              <el-select multiple v-model="ruleForm.mode_of_transportation">
                <el-option
                  v-for="(item, index) in TransportTypeData"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发货人" prop="shipper_ids">
              <el-select multiple v-model="ruleForm.shipper_ids">
                <el-option
                  v-for="item in shipperBoxData"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="收货人" prop="consignee_ids">
              <el-select multiple v-model="ruleForm.consignee_ids">
                <el-option
                  v-for="item in shipperBoxData"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开单时间" prop="ordertimebegin">
              <el-date-picker
                v-model="ruleForm.ordertimebegin"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="启用时间" prop="disable_time">
              <el-date-picker
                v-model="ruleForm.disable_time"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="停用时间" prop="enable_time">
              <el-date-picker
                v-model="ruleForm.enable_time"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="重量范围" prop="min_weight">
              <span class="span1"
                ><el-input v-model="ruleForm.min_weight"></el-input
              ></span>
              <span class="span2">--</span>
              <span class="span3"
                ><el-input v-model="ruleForm.max_weight"></el-input
              ></span>
            </el-form-item>
            <el-form-item label="体积范围" prop="min_volume">
              <span class="span1"
                ><el-input v-model="ruleForm.min_volume"></el-input
              ></span>
              <span class="span2">--</span>
              <span class="span3"
                ><el-input v-model="ruleForm.max_volume"></el-input
              ></span>
            </el-form-item>
            <el-form-item label="件数范围" prop="min_number">
              <span class="span1"
                ><el-input v-model="ruleForm.min_number"></el-input
              ></span>
              <span class="span2">--</span>
              <span class="span3"
                ><el-input v-model="ruleForm.max_number"></el-input
              ></span>
            </el-form-item>
            <el-form-item label="出发网点" prop="start_off_website_ids">
              <el-select multiple v-model="ruleForm.start_off_website_ids">
                <el-option
                  v-for="item in originList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目的网点" prop="purpose_website_ids">
              <el-select v-model="ruleForm.purpose_website_ids">
                <el-option
                  v-for="item in originList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="温层" prop="temperature_layer">
              <el-select multiple v-model="ruleForm.temperature_layer">
                <el-option
                  v-for="(item, index) in tempControlData"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="货物名称" prop="goods_name">
              <el-input
                placeholder="填写多个用逗号隔开"
                v-model="ruleForm.goods_name"
              ></el-input>
            </el-form-item>
            <el-form-item label="货物包装" prop="goods_packaging">
              <el-select
                multiple
                v-model="ruleForm.goods_packaging"
              ></el-select>
            </el-form-item>
            <el-form-item label="折扣/上浮名称" prop="discountname">
              <el-input v-model="ruleForm.discountname"></el-input>
            </el-form-item>
            <el-form-item label="折扣/上浮系数" prop="percentage">
              <el-input v-model="ruleForm.percentage"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="footer_pricepage">
        <div style="margin: 0 auto">
          <el-button
            id="orderSave"
            type="primary"
            plain
            size="mini"
            @click="drawerdiscountClickFn"
            >保存</el-button
          >
          <el-button id="orderCancel" @click="drawerdiscountShow = false"
            >取消</el-button
          >
        </div>
      </div>
    </el-drawer>
    <el-drawer
      title="编辑折扣"
      :visible.sync="drawerdiscountEditShow"
      :direction="direction"
      :before-close="handleEditClose"
      :wrapperClosable="false"
      size="40%"
    >
      <div style="padding: 0 20px" class="form_content">
        <el-form
          :model="ruleFormEdit"
          :rules="rulesEdti"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <div class="color_bg">
            <el-form-item label="产品类型" prop="product_type">
              <el-select multiple v-model="ruleFormEdit.product_type">
                <el-option
                  v-for="item in OptionListData"
                  :key="item.id"
                  :value="Number(item.id)"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运输方式" prop="mode_of_transportation">
              <el-select multiple v-model="ruleFormEdit.mode_of_transportation">
                <el-option
                  v-for="(item, index) in TransportTypeData"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发货人" prop="shipper_ids">
              <el-select multiple v-model="ruleFormEdit.shipper_ids">
                <el-option
                  v-for="item in shipperBoxData"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="收货人" prop="consignee_ids">
              <el-select multiple v-model="ruleFormEdit.consignee_ids">
                <el-option
                  v-for="item in shipperBoxData"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开单时间" prop="ordertimebegin">
              <el-date-picker
                v-model="ruleFormEdit.ordertimebegin"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="启用时间" prop="disable_time">
              <el-date-picker
                v-model="ruleFormEdit.disable_time"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="停用时间" prop="enable_time">
              <el-date-picker
                v-model="ruleFormEdit.enable_time"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="重量范围" prop="min_weight">
              <span class="span1"
                ><el-input v-model="ruleFormEdit.min_weight"></el-input
              ></span>
              <span class="span2">--</span>
              <span class="span3"
                ><el-input v-model="ruleFormEdit.max_weight"></el-input
              ></span>
            </el-form-item>
            <el-form-item label="体积范围" prop="min_volume">
              <span class="span1"
                ><el-input v-model="ruleFormEdit.min_volume"></el-input
              ></span>
              <span class="span2">--</span>
              <span class="span3"
                ><el-input v-model="ruleFormEdit.max_volume"></el-input
              ></span>
            </el-form-item>
            <el-form-item label="件数范围" prop="min_number">
              <span class="span1"
                ><el-input v-model="ruleFormEdit.min_number"></el-input
              ></span>
              <span class="span2">--</span>
              <span class="span3"
                ><el-input v-model="ruleFormEdit.max_number"></el-input
              ></span>
            </el-form-item>
            <el-form-item label="出发网点" prop="start_off_website_ids">
              <el-select multiple v-model="ruleFormEdit.start_off_website_ids">
                <el-option
                  v-for="item in originList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目的网点" prop="purpose_website_ids">
              <el-select v-model="ruleFormEdit.purpose_website_ids">
                <el-option
                  v-for="item in originList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="温层" prop="temperature_layer">
              <el-select multiple v-model="ruleFormEdit.temperature_layer">
                <el-option
                  v-for="(item, index) in tempControlData"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="货物名称" prop="goods_name">
              <el-input
                placeholder="填写多个用逗号隔开"
                v-model="ruleFormEdit.goods_name"
              ></el-input>
            </el-form-item>
            <el-form-item label="货物包装" prop="goods_packaging">
              <el-select
                multiple
                v-model="ruleFormEdit.goods_packaging"
              ></el-select>
            </el-form-item>
            <el-form-item label="折扣/上浮名称" prop="discountname">
              <el-input v-model="ruleFormEdit.discountname"></el-input>
            </el-form-item>
            <el-form-item label="折扣/上浮系数" prop="percentage">
              <el-input v-model="ruleFormEdit.percentage"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="footer_pricepage">
        <div style="margin: 0 auto">
          <el-button
            id="orderSave"
            type="primary"
            plain
            size="mini"
            @click="drawerdiscountClickEditFn"
            >保存</el-button
          >
          <el-button id="orderCancel" @click="drawerdiscountEditShow = false"
            >取消</el-button
          >
        </div>
      </div>
    </el-drawer>
    <el-drawer
      title="折扣详情"
      :visible.sync="drawerdiscountDetailShow"
      :direction="direction"
      :before-close="handleDetailClose"
      :wrapperClosable="false"
      size="40%"
    >
      <div style="padding: 0 20px" class="form_content">
        <el-form
          :model="ruleFormDetail"
          :rules="rulesDetail"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <div class="color_bg">
            <el-form-item label="产品类型" prop="product_type">
              <el-select multiple v-model="ruleFormDetail.product_type">
                <el-option
                  v-for="item in OptionListData"
                  :key="item.id"
                  :value="Number(item.id)"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运输方式" prop="mode_of_transportation">
              <el-select
                multiple
                v-model="ruleFormDetail.mode_of_transportation"
              >
                <el-option
                  v-for="(item, index) in TransportTypeData"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发货人" prop="shipper_ids">
              <el-select multiple v-model="ruleFormDetail.shipper_ids">
                <el-option
                  v-for="item in shipperBoxData"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="收货人" prop="consignee_ids">
              <el-select multiple v-model="ruleFormDetail.consignee_ids">
                <el-option
                  v-for="item in shipperBoxData"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开单时间" prop="ordertimebegin">
              <el-date-picker
                v-model="ruleFormDetail.ordertimebegin"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="启用时间" prop="disable_time">
              <el-date-picker
                v-model="ruleFormDetail.disable_time"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="停用时间" prop="enable_time">
              <el-date-picker
                v-model="ruleFormDetail.enable_time"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="重量范围" prop="min_weight">
              <span class="span1"
                ><el-input v-model="ruleFormDetail.min_weight"></el-input
              ></span>
              <span class="span2">--</span>
              <span class="span3"
                ><el-input v-model="ruleFormDetail.max_weight"></el-input
              ></span>
            </el-form-item>
            <el-form-item label="体积范围" prop="min_volume">
              <span class="span1"
                ><el-input v-model="ruleFormDetail.min_volume"></el-input
              ></span>
              <span class="span2">--</span>
              <span class="span3"
                ><el-input v-model="ruleFormDetail.max_volume"></el-input
              ></span>
            </el-form-item>
            <el-form-item label="件数范围" prop="min_number">
              <span class="span1"
                ><el-input v-model="ruleFormDetail.min_number"></el-input
              ></span>
              <span class="span2">--</span>
              <span class="span3"
                ><el-input v-model="ruleFormDetail.max_number"></el-input
              ></span>
            </el-form-item>
            <el-form-item label="出发网点" prop="start_off_website_ids">
              <el-select
                multiple
                v-model="ruleFormDetail.start_off_website_ids"
              >
                <el-option
                  v-for="item in originList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目的网点" prop="purpose_website_ids">
              <el-select v-model="ruleFormDetail.purpose_website_ids">
                <el-option
                  v-for="item in originList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="温层" prop="temperature_layer">
              <el-select multiple v-model="ruleFormDetail.temperature_layer">
                <el-option
                  v-for="(item, index) in tempControlData"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="货物名称" prop="goods_name">
              <el-input
                placeholder="填写多个用逗号隔开"
                v-model="ruleFormDetail.goods_name"
              ></el-input>
            </el-form-item>
            <el-form-item label="货物包装" prop="goods_packaging">
              <el-select
                multiple
                v-model="ruleFormDetail.goods_packaging"
              ></el-select>
            </el-form-item>
            <el-form-item label="折扣/上浮名称" prop="discountname">
              <el-input v-model="ruleFormDetail.discountname"></el-input>
            </el-form-item>
            <el-form-item label="折扣/上浮系数" prop="percentage">
              <el-input v-model="ruleFormDetail.percentage"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { PagewebsiteList } from "../material/common/common";
import {
  // reqRegionList,
  billingCreateFeeFn,
  billingCreateIncreasesFn,
  billingFeeListFn,
  modifyBillingFeeFn,
  deleteBillingFeeFn,
  OptionList,
  shipperBox,
  consigneeBox,
  BillingDiscountsList,
  BillingDiscountsDelete,
  BillingDiscountsUpdate,
  BillingDiscountsDetail,
} from "@/api/billingrules";
import { reqDictionaryOptions } from "@/api/earlywarning";
import { getRegionList } from "@/api/waybill";
export default {
  name: "pricepage",
  data() {
    return {
      props: {
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level } = node;
          let result = await getRegionList({ pid: node.value });
          const nodes = result.data.map((item) => ({
            value: item.id,
            label: item.name,
            leaf: level >= 2,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        },
      },
      value1111: [28, 366, 3173],
      isModify: [], //有哪些是要修改的
      options: [],
      options2: [],
      disableShowFlag: false,
      drawerdiscountShow: false,
      drawerdiscountEditShow: false,
      drawerdiscountDetailShow: false,
      direction: "rtl",
      accountDetail: [{ max: "", min: "" }],
      accountNum: 1, //计价方式的数量
      orderSearch: {
        outlets: "公里数",
      },
      activeName: "first",
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 100, //一页多少条
      ruleForm: {
        percentage: "",
        discountname: "",
        goods_packaging: "",
        goods_name: "",
        temperature_layer: "",
        purpose_website_ids: "",
        start_off_website_ids: "",
        max_number: "",
        min_number: "",
        max_volume: "",
        min_volume: "",
        max_weight: "",
        min_weight: "",
        disable_time: "",
        enable_time: "",
        order_time_end: "",
        order_time_begin: "",
        shipper_ids: "",
        consignee_ids: "",
        mode_of_transportation: "",
        product_type: "",
      },
      rules: {},
      ruleFormEdit: {
        percentage: "",
        discountname: "",
        goods_packaging: "",
        goods_name: "",
        temperature_layer: "",
        purpose_website_ids: "",
        start_off_website_ids: "",
        max_number: "",
        min_number: "",
        max_volume: "",
        min_volume: "",
        max_weight: "",
        min_weight: "",
        disable_time: "",
        enable_time: "",
        order_time_end: "",
        order_time_begin: "",
        shipper_ids: "",
        consignee_ids: "",
        mode_of_transportation: "",
        product_type: "",
      },
      rulesEdti: {},
      ruleFormDetail: {
        percentage: "",
        discountname: "",
        goods_packaging: "",
        goods_name: "",
        temperature_layer: "",
        purpose_website_ids: "",
        start_off_website_ids: "",
        max_number: "",
        min_number: "",
        max_volume: "",
        min_volume: "",
        max_weight: "",
        min_weight: "",
        disable_time: "",
        enable_time: "",
        order_time_end: "",
        order_time_begin: "",
        shipper_ids: "",
        consignee_ids: "",
        mode_of_transportation: "",
        product_type: "",
      },
      rulesDetail: {},
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      tableDataDisplay: [], //专门用于列表展示的表格数据
      OpitonsData: [],
      OptionListData: [],
      TransportTypeData: [],
      eliverymethData: [],
      shipperBoxData: [],
      tempControlData: [],
      originList: [],
      consigneeBoxData: [],
      DiscountsListData: [],
      editDataId: "",
    };
  },
  mounted() {
    this.activeName = this.$route.query.activename;
    this.siteListFn();
    this.SelectOpitonsFn();
    this.optionList();
    this.TransportTypeFn();
    this.DeliverymethodFn();
    this.clickshipperBoxFn();
    this.tempControlFn();
    this.consigneeBoxFn();
    this.BillingDiscountsListFn(this.pageNum, this.pageSize);
    // this.getOptions({ name: "" });
    this.getPriceList();
  },
  methods: {
    async modifyPriceRule(id) {
      this.tableDataDisplay.find((item) => item.id === id).is_modify = true;
      this.isModify.push(id);
    },
    addLine() {
      this.tableDataDisplay.push({
        is_modify: true,
        startregion: "",
        endregion: "",
        minprice: "",
        firstPrice1: "",
        nextPrice1: "",
        firstSize1: "",
        firstPrice2: "",
        nextPrice2: "",
        firstSize2: "",
        firstPrice3: "",
        nextPrice3: "",
        firstSize3: "",
        firstPrice4: "",
        nextPrice4: "",
        firstSize4: "",
        firstPrice5: "",
        nextPrice5: "",
        firstSize5: "",
        firstPrice6: "",
        nextPrice6: "",
        firstSize6: "",
      });
    },
    async deleteOneLine(id) {
      if (id) {
        await deleteBillingFeeFn({
          id: [id],
        });
        this.getPriceList();
      } else {
        this.tableDataDisplay.pop();
      }
    },
    async getPriceList() {
      let result = await billingFeeListFn({
        page: this.pageNum,
        page_size: this.pageSize,
        quotation_way_id: this.$route.query.id * 1,
      });
      let arr = [];
      if (result.data.list) {
        result.data.list.forEach((item, index1) => {
          arr.push({
            is_modify: item.is_modify,
            id: item.id,
            billingWayId: item.billing_way_info
              ? item.billing_way_info[0].id * 1
              : "",
            ladderPriceInfoId: item.billing_way_info[0].ladder_price_info
              ? item.billing_way_info[0].ladder_price_info.map(
                  (item) => item.id
                )
              : "",
            startregion: [],
            // item.origin_province_name +
            // item.origin_city_name +
            // item.origin_district_name,
            endregion: [],
            // item.dest_province_name +
            // item.dest_city_name +
            // item.dest_district_name,
            firstPrice1: item.billing_way_info
              ? item.billing_way_info[0].based_on_price / 100
              : "",
            nextPrice1: item.billing_way_info
              ? item.billing_way_info[0].further_price / 100
              : "",
            firstSize1: item.billing_way_info
              ? this.orderSearch.outlets === "公里数"
                ? item.billing_way_info[0].first_measure / 1000
                : this.orderSearch.outlets === "件数"
                ? item.billing_way_info[0].first_measure
                : this.orderSearch.outlets === "体积"
                ? item.billing_way_info[0].first_measure / 1000000
                : item.billing_way_info[0].first_measure / 1000
              : "",
          });
          if (item.origin_district_id == 0) {
            if (item.origin_city_id == 0) {
              arr[index1].startregion = [item.origin_province_id * 1];
            } else {
              arr[index1].startregion = [
                item.origin_province_id * 1,
                item.origin_city_id * 1,
              ];
            }
          } else if (item.origin_city_id != 0 && item.origin_district_id != 0) {
            arr[index1].startregion = [
              item.origin_province_id * 1,
              item.origin_city_id * 1,
              item.origin_district_id * 1,
            ];
          }
          if (item.dest_district_id == 0) {
            if (item.dest_city_id == 0) {
              arr[index1].endregion = [item.dest_province_id * 1];
            } else {
              arr[index1].endregion = [
                item.dest_province_id * 1,
                item.dest_city_id * 1,
              ];
            }
          } else if (item.dest_city_id != 0 && item.dest_district_id != 0) {
            arr[index1].endregion = [
              item.dest_province_id * 1,
              item.dest_city_id * 1,
              item.dest_district_id * 1,
            ];
          }
          this.accountDetail[0].max = item.billing_way_info
            ? item.billing_way_info[0].first_measure / 1000
            : "";
          this.accountDetail[0].min = 0;
          if (
            item.billing_way_info.length > 0 &&
            item.billing_way_info[0].ladder_price_info
          ) {
            item.billing_way_info[0].ladder_price_info.forEach(
              (item2, index2) => {
                arr[index1][`firstPrice${index2 + 2}`] = item2.unit_price / 100;
                arr[index1][`nextPrice${index2 + 2}`] = "";
                arr[index1][`firstSize${index2 + 2}`] = "";
                arr[index1][`ladderPriceId${index2 + 1}`] = item2.id;
              }
            );
          }
        });
        if (result.data.list[0].billing_way_info[0].ladder_price_info) {
          result.data.list[0].billing_way_info[0].ladder_price_info.forEach(
            (item, index) => {
              this.accountDetail[index + 1] = {
                max: item.max_measure / 1000,
                min: item.min_measure / 1000,
              };
            }
          );
        }
      }
      this.accountNum = this.accountDetail.length;
      this.tableDataDisplay = arr;
      this.pageNum = result.data.pagination.page * 1;
      this.totalListNum = result.data.pagination.total * 1;
      this.pageSize = result.data.pagination.page_size * 1;
    },
    async saveList() {
      const { tableDataDisplay } = this;
      this.isModify = [...new Set(this.isModify)];
      if (this.isModify[0]) {
        // console.log(this.isModify, "修改");
        this.isModify.forEach(async (item) => {
          let obj = tableDataDisplay.find((item2) => item2.id === item);
          let params = {
            line_id: item,
            origin_province_id: String(obj.startregion[0]), // 始发地省id  必填
            origin_city_id: String(obj.startregion[1]), // 始发地市id   必填
            origin_district_id: String(obj.startregion[2]), // 始发地区县id
            dest_province_id: String(obj.endregion[0]), // 目的地省id  必填
            dest_city_id: String(obj.endregion[1]), // 目的地市id 必填
            dest_district_id: String(obj.endregion[2]), // 目的地区县id};
            quotation_way_id: this.$route.query.id * 1,
            billing_way_list: [
              {
                name: this.orderSearch.outlets,
                billing_way_id: obj.billingWayId * 1,
                based_on_price: String(obj.firstPrice1 * 100), //首价：单位分  必填
                further_price: String(obj.nextPrice1 * 100), // 续价：单位分  必填
                first_measure: String(
                  this.orderSearch.outlets === "公里数"
                    ? obj.firstSize1 * 1000
                    : this.orderSearch.outlets === "件数"
                    ? obj.firstSize1
                    : this.orderSearch.outlets === "体积"
                    ? obj.firstSize1 * 1000000
                    : obj.firstSize1 * 1000
                ), // 首计量：单位：重量：克，体积：立方厘米，里程：米  必填
                billing_ladder_price_list: [],
              },
            ],
          };
          if (obj.firstPrice2 !== "") {
            let num = 0;
            for (let key in obj) {
              if (new RegExp("^firstPrice.*$").test(key) && obj.key !== "") {
                num++;
              }
            }
            for (var i = 1; i < num; i++) {
              params.billing_way_list[0].billing_ladder_price_list.push({
                ladder_price_id: obj.ladderPriceInfoId[i]
                  ? obj.ladderPriceInfoId[i]
                  : 0,
                unit_price: obj[`firstPrice${i + 1}`] * 100,
                min_measure:
                  this.orderSearch.outlets === "公里数"
                    ? this.accountDetail[i].min * 1000
                    : this.orderSearch.outlets === "件数"
                    ? this.accountDetail[i].min
                    : this.orderSearch.outlets === "体积"
                    ? this.accountDetail[i].min * 1000000
                    : this.accountDetail[i].min * 1000,
                max_measure:
                  this.orderSearch.outlets === "公里数"
                    ? this.accountDetail[i].max * 1000
                    : this.orderSearch.outlets === "件数"
                    ? this.accountDetail[i].max
                    : this.orderSearch.outlets === "体积"
                    ? this.accountDetail[i].max * 1000000
                    : this.accountDetail[i].max * 1000,
              });
            }
          }
          await modifyBillingFeeFn(params);
        });
      } else {
        // console.log(this.isModify, "添加");
        let arr = [];
        // let obj = tableDataDisplay.find((item2) => item2.id === item);
        tableDataDisplay.forEach((item, index) => {
          arr[index] = {
            origin_province_id: String(item.startregion[0]), // 始发地省id  必填
            origin_city_id: String(item.startregion[1]), // 始发地市id   必填
            origin_district_id: String(item.startregion[2]), // 始发地区县id
            dest_province_id: String(item.endregion[0]), // 目的地省id  必填
            dest_city_id: String(item.endregion[1]), // 目的地市id 必填
            dest_district_id: String(item.endregion[2]), // 目的地区县id};
            quotation_way_id: this.$route.query.id * 1,
            billing_way_list: [
              {
                name: this.orderSearch.outlets,
                based_on_price: String(item.firstPrice1 * 100), //首价：单位分  必填
                further_price: String(item.nextPrice1 * 100), // 续价：单位分  必填
                first_measure: String(
                  this.orderSearch.outlets === "公里数"
                    ? item.firstSize1 * 1000
                    : this.orderSearch.outlets === "件数"
                    ? item.firstSize1
                    : this.orderSearch.outlets === "体积"
                    ? item.firstSize1 * 1000000
                    : item.firstSize1 * 1000
                ), // 首计量：单位：重量：克，体积：立方厘米，里程：米  必填
                billing_ladder_price_list: [],
              },
            ],
          };
          if (tableDataDisplay[index].firstPrice2 !== "") {
            let num = 0;
            for (let key in tableDataDisplay[index]) {
              if (new RegExp("^firstPrice.*$").test(key)) {
                if (tableDataDisplay[index][key] !== "") {
                  num++;
                }
              }
            }
            for (var i = 1; i < num; i++) {
              arr[index].billing_way_list[0].billing_ladder_price_list.push({
                unit_price: tableDataDisplay[index][`firstPrice${i + 1}`] * 100,
                min_measure:
                  this.orderSearch.outlets === "公里数"
                    ? this.accountDetail[i].min * 1000
                    : this.orderSearch.outlets === "件数"
                    ? this.accountDetail[i].min
                    : this.orderSearch.outlets === "体积"
                    ? this.accountDetail[i].min * 1000000
                    : this.accountDetail[i].min * 1000,
                max_measure:
                  this.orderSearch.outlets === "公里数"
                    ? this.accountDetail[i].max * 1000
                    : this.orderSearch.outlets === "件数"
                    ? this.accountDetail[i].max
                    : this.orderSearch.outlets === "体积"
                    ? this.accountDetail[i].max * 1000000
                    : this.accountDetail[i].max * 1000,
              });
            }
          }
        });
        await billingCreateFeeFn({ billing_rules: arr });
      }
      setTimeout(() => {
        this.getPriceList();
      }, 500);
    },
    addAccountNum() {
      //添加一行计费方式
      this.accountNum++;
      this.accountDetail.push({ min: "", max: "" });
    },
    deleteAccountNum() {
      if (this.accountNum > 1) {
        this.accountNum--;
        this.accountDetail.pop();
      } else {
        this.accountNum = 1;
      }
    },
    handleClose() {
      this.drawerdiscountShow = false;
    },
    // 组织管理页面
    siteListFn() {
      // var sitL = PagewebsiteList("0")`
      // this.originList = sitL
      PagewebsiteList("0").then((res) => {
        var res = res.data;
        for (var j = 0; j < res.length; j++) {
          this.originList.push({
            value: res[j].id,
            label: res[j].name,
          });
        }
      });
    },
    //tab页面点击的时候操作函数
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    // 获取下拉框数据
    SelectOpitonsFn() {
      const data = {
        dictionary_code: "pricing_meth",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.OpitonsData = res.data.list;
        }
      });
    },
    //运输类型函数
    TransportTypeFn() {
      const data = {
        dictionary_code: "transport_ty",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.TransportTypeData = res.data.list;
        }
      });
    },
    //送货方式函数
    DeliverymethodFn() {
      const data = {
        dictionary_code: "elivery_meth",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.eliverymethData = res.data.list;
        }
      });
    },
    //发货人API函数
    clickshipperBoxFn() {
      const data = {
        name: "",
      };
      shipperBox(data).then((res) => {
        if (res.code === 10000 || res.data.length > 0) {
          this.shipperBoxData = res.data;
        }
      });
    },
    //收货人API函数
    consigneeBoxFn() {
      const data = {
        name: "",
      };
      consigneeBox(data).then((res) => {
        if (res.code === 10000 || res.data.length > 0) {
          this.consigneeBoxData = res.data;
        }
      });
    },

    //创建价格操作函数
    // ClickBillingCreateFeeFn() {
    //   const data = {};
    //   billingCreateFeeFn(data).then((res) => {
    //     if (res.code === 10000 || res.data.list.length > 0) {
    //       this.OpitonsData = res.data.list;
    //     }
    //   });
    // },
    //产品类型 接口
    optionList() {
      const data = {
        is_all: false,
      };
      OptionList(data).then((res) => {
        if (res.code === 10000 && res.data.length > 0) {
          let arr = [];
          res.data.forEach((item) => {
            arr.push({
              id: item.id,
              name: item.name,
            });
          });
          this.OptionListData = arr;
          // console.log(arr, "arr");
        }
      });
    },
    //温层
    tempControlFn() {
      const data = {
        dictionary_code: "temp_control",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.tempControlData = res.data.list;
        }
      });
    },
    //创建折扣操作函数
    AddDiscountClickFn() {
      this.drawerdiscountShow = true;
    },
    //确定那妞 新增
    drawerdiscountClickFn() {
      if (
        this.ruleForm.name !== "" &&
        this.ruleForm.percentage !== "" &&
        this.ruleForm.disable_time !== "" &&
        this.ruleForm.enable_time !== ""
      ) {
        const object = {
          percentage: this.ruleForm.percentage,
          name: this.ruleForm.discountname,
          goods_packaging: this.ruleForm.goods_packaging,
          goods_name: this.ruleForm.goods_name
            ? this.ruleForm.goods_name.split("，")[0].split(",")
            : [],
          temperature_layer: this.ruleForm.temperature_layer,
          purpose_website_ids: this.ruleForm.purpose_website_ids,
          start_off_website_ids: this.ruleForm.start_off_website_ids,
          max_number: this.ruleForm.max_number,
          min_number: this.ruleForm.min_number,
          max_volume: this.ruleForm.max_volume,
          min_volume: this.ruleForm.min_volume,
          max_weight: this.ruleForm.max_weight,
          min_weight: this.ruleForm.min_weight,
          disable_time: new Date(this.ruleForm.disable_time).getTime() / 1000,
          enable_time: new Date(this.ruleForm.enable_time).getTime() / 1000,
          order_time_end: this.ruleForm.order_time_end
            ? new Date(this.ruleForm.order_time_end).getTime()
            : +"",
          order_time_begin: this.ruleForm.order_time_begin
            ? new Date(this.ruleForm.order_time_begin).getTime()
            : +"",
          shipper_ids: this.ruleForm.shipper_ids,
          consignee_ids: this.ruleForm.consignee_ids,
          mode_of_transportation: this.ruleForm.mode_of_transportation,
          product_type: this.ruleForm.product_type,
        };
        billingCreateIncreasesFn(object).then((res) => {
          if (res.code === 10000) {
            this.$message({
              message: "创建折扣成功",
              type: "success",
            });
            this.BillingDiscountsListFn(this.pageNum, this.pageSize);
          }
        });
      } else {
        this.$message({
          message:
            "Name为必填字段;Percentage为必填字段;EnableTime为必填字段;DisableTime为必填字段",
          type: "success",
        });
      }
    },
    //编辑
    editorClickFn(NumId) {
      this.drawerdiscountEditShow = true;
      this.ruleFormEdit.percentage = NumId.percentage;
      this.ruleFormEdit.discountname = NumId.name;
      this.ruleFormEdit.goods_packaging = NumId.goods_packaging;
      this.ruleFormEdit.goods_name = NumId.goods_name;
      this.ruleFormEdit.temperature_layer = NumId.temperature_layer;
      this.ruleFormEdit.purpose_website_ids = NumId.purpose_website_ids;
      this.ruleFormEdit.start_off_website_ids = NumId.start_off_website_ids;
      this.ruleFormEdit.max_number = NumId.max_number;
      this.ruleFormEdit.min_number = NumId.min_number;
      this.ruleFormEdit.max_volume = NumId.max_volume;
      this.ruleFormEdit.min_volume = NumId.min_volume;
      this.ruleFormEdit.max_weight = NumId.max_weight;
      this.ruleFormEdit.min_weight = NumId.min_weight;
      this.ruleFormEdit.disable_time = NumId.disable_time * 1000;
      this.ruleFormEdit.enable_time = NumId.enable_time * 1000;
      this.ruleFormEdit.order_time_end = NumId.order_time_end;
      this.ruleFormEdit.order_time_begin = NumId.order_time_begin;
      this.ruleFormEdit.shipper_ids = NumId.shipper_ids;
      this.ruleFormEdit.consignee_ids = NumId.consignee_ids;
      this.ruleFormEdit.mode_of_transportation = NumId.mode_of_transportation;
      this.ruleFormEdit.product_type = NumId.product_type;
      this.editDataId = NumId.id;
    },
    //编辑确定按钮
    drawerdiscountClickEditFn() {
      const object = {
        id: this.editDataId,
        percentage: this.ruleFormEdit.percentage.toString(),
        name: this.ruleFormEdit.discountname,
        goods_packaging: this.ruleFormEdit.goods_packaging,
        goods_name: this.ruleFormEdit.goods_name
          ? this.ruleFormEdit.goods_name.split("，")[0].split(",")
          : [],
        temperature_layer: this.ruleFormEdit.temperature_layer,
        purpose_website_ids: this.ruleFormEdit.purpose_website_ids,
        start_off_website_ids: this.ruleFormEdit.start_off_website_ids,
        max_number: this.ruleFormEdit.max_number,
        min_number: this.ruleFormEdit.min_number,
        max_volume: this.ruleFormEdit.max_volume,
        min_volume: this.ruleFormEdit.min_volume,
        max_weight: this.ruleFormEdit.max_weight,
        min_weight: this.ruleFormEdit.min_weight,
        disable_time: new Date(this.ruleFormEdit.disable_time).getTime() / 1000,
        enable_time: new Date(this.ruleFormEdit.enable_time).getTime() / 1000,
        order_time_end: this.ruleFormEdit.order_time_end
          ? new Date(this.ruleFormEdit.order_time_end).getTime()
          : +"",
        order_time_begin: this.ruleFormEdit.order_time_begin
          ? new Date(this.ruleFormEdit.order_time_begin).getTime()
          : +"",
        shipper_ids: this.ruleFormEdit.shipper_ids,
        consignee_ids: this.ruleFormEdit.consignee_ids,
        mode_of_transportation: this.ruleFormEdit.mode_of_transportation,
        product_type: this.ruleFormEdit.product_type,
      };
      BillingDiscountsUpdate(object).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "编辑折扣成功",
            type: "success",
          });
          this.BillingDiscountsListFn(this.pageNum, this.pageSize);
        }
      });
    },
    //详情折扣
    DetailClickFn(valNum) {
      this.drawerdiscountDetailShow = true;
      const object = {
        id: valNum.id,
      };
      BillingDiscountsDetail(object).then((res) => {
        if (res.code === 10000) {
          this.ruleFormDetail.percentage = res.data.percentage;
          this.ruleFormDetail.discountname = res.data.name;
          this.ruleFormDetail.goods_packaging = res.data.goods_packaging;
          this.ruleFormDetail.goods_name = res.data.goods_name
            ? res.data.goods_name.split("，")[0].split(",")
            : [];
          this.ruleFormDetail.temperature_layer = res.data.temperature_layer;
          this.ruleFormDetail.purpose_website_ids =
            res.data.purpose_website_ids;
          this.ruleFormDetail.start_off_website_ids =
            res.data.start_off_website_ids;
          this.ruleFormDetail.max_number = res.data.max_number;
          this.ruleFormDetail.min_number = res.data.min_number;
          this.ruleFormDetail.max_volume = res.data.max_volume;
          this.ruleFormDetail.min_volume = res.data.min_volume;
          this.ruleFormDetail.max_weight = res.data.max_weight;
          this.ruleFormDetail.min_weight = res.data.min_weight;
          this.ruleFormDetail.disable_time = res.data.disable_time * 1000;
          this.ruleFormDetail.enable_time = res.data.enable_time * 1000;
          this.ruleFormDetail.order_time_end = res.data.order_time_end;
          this.ruleFormDetail.order_time_begin = res.data.order_time_begin;
          this.ruleFormDetail.shipper_ids = res.data.shipper_ids;
          this.ruleFormDetail.consignee_ids = res.data.consignee_ids;
          this.ruleFormDetail.mode_of_transportation =
            res.data.mode_of_transportation;
          this.ruleFormDetail.product_type = res.data.product_type;
        }
      });
    },
    handleEditClose() {
      this.drawerdiscountEditShow = false;
    },
    handleDetailClose() {
      this.drawerdiscountDetailShow = false;
    },
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.BillingDiscountsListFn(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.BillingDiscountsListFn(this.pageNum, this.pageSize);
    },
    // 折扣列表
    BillingDiscountsListFn(pageNumval, pageSizeval) {
      const data = {
        page: pageNumval,
        page_size: pageSizeval,
      };
      BillingDiscountsList(data).then((res) => {
        if (res.code === 10000) {
          this.DiscountsListData = res.data.list;
        }
      });
    },
    //删除折扣数据
    deletecloumnFn(rowval) {
      const idsData = [];
      idsData.push(rowval.id);
      const dataId = {
        id: idsData,
      };
      BillingDiscountsDelete(dataId).then((res) => {
        if (res.code === 10000) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.BillingDiscountsListFn(this.pageNum, this.pageSize);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .list_input .el-input {
  width: 80px !important;
}
/deep/.el-date-editor.el-input {
  width: 180px !important;
}
/deep/.el-range-editor--mini.el-input__inner {
  width: 325px !important;
}
/deep/.el-range-editor--mini .el-range-input {
  width: 130px !important;
}
.allOrderContainer {
  padding: 5px;
  background-color: #fff;
  height: calc(100vh - 15.5vh);
  span {
    display: block;
    float: left;
    width: 45%;
  }
  .span2 {
    width: 3%;
  }
  .orderHeader {
    // margin-bottom: 10px;
    padding-top: 20px;
    background-color: #fff;
    .orderSearch {
      margin: 10px;
      form {
        ::v-deep .el-form-item__label {
          font-size: 12px;
        }
        .el-textarea {
          width: 135px;
        }
      }
    }
  }
  .kg_list {
    padding: 0 20px;
    .list_one {
      width: 100%;
      min-height: 40px;
      overflow: hidden;
      margin-bottom: 20px;
      span {
        display: block;
        float: left;
        font-size: 12px;
        line-height: 30px;
        width: 150px;
      }
      .list_input {
        float: left;
        margin-right: 10px;
      }
      .list_icon {
        float: left;
        i {
          font-size: 24px;
          margin-right: 10px;
        }
        .bgcolor {
          color: red;
        }
      }
    }
  }
}
</style>
